<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			/* p{
				color: red;
			} */
			.yiwen {
				color: aqua;
			}

			.english {
				font-size: 30px;
			}

			#english {
				color: purple;
			}

			/* 交集选择器 */
			/* p.door{
				color:#000; 
			} */
			/* 并集选择器 */
			.yiwen,
			.door {
				color: pink;
			}

			/* div p span{
				color: blue;
			} */
			/* div span{
				color: yellow;
			} */
			div>span {
				color: yellow;
			}
				
			/* .shubiao:hover{
				color: red;
			} */
			.box{
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			.box:hover .shubiao{
				color: green;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: pink;
				margin-top: 30px;
			}
			.box:hover+.box2{
				background-color: red;
			}
			.three+li{
				color: red;
			}
			.three~li{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>我是超人</p>
		<p class="yiwen english">gdsjhakhfdkjsa</p>
		<div class="yiwen">123</div>
		<div id="english">asgdbiuaskhdolASKJdiv</div>
		<p class="door">北京天安门</p>
		<!-- <div>
			<p>
				<span>马王村</span>
			</p>
		</div> -->
		<div>
			<span>鸡蛋糕</span>
			<p>
				<span>轩煤汤</span>
			</p>
		</div>
		<div class="box">
			<p class="shubiao">鼠标移上变颜色</p>
		</div>
		<div class="box2">
			
		</div>
		<ul>
			<li>234554565674567456757</li>
			<li>234554565674567456757</li>
			<li class="three">234554565674567456757</li>
			<li>234554565674567456757</li>
			<li>234554565674567456757</li>
			<li>234554565674567456757</li>
		</ul>
	</body>
</html>
